昨天我們談了基礎的JSX的規則，這次我們來看看JSX當中的花括號是怎麼使用的呢？今天會討論到的議題：

• 使用花括號的功能
• 如何理解花括號
• double花括號的使用

先來一個暖身花括號：

const name = "John";
const greeting = <h1>Hello, {name}!</h1>;

使用花括號來插入變數值的例子，再來我們比較看看

沒有使用花括號：

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

我們直接在將值放入屬性中

使用花括號：

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

我們使用了變數 avatar 和 description 來儲存 URL 和替代文字，接著我們使用 {} 將這些變數包裹起來，這樣 React 就會將變數的值動態地插入到對應的屬性中。

如何理解花括號

大致了解JSX花括號的功能了，那我們該如何去理解{ }？首先我們來看看React的官方文件怎麼說：

Using curly braces: A window into the JavaScript world

（「進入 JavaScript 世界的一個窗口」）

另外，Josh W Comeau在介紹花括號時說明的「表達式插槽」（Expression Slots）我也覺得相當精準。

也就是透過我們可以直通Javascript的世界。我們可以在花括號裡頭使用純Javascript語法，React 不會對這些放在表達式插槽中的 JavaScript 表達式進行任何修改，而是原封不動地將它們傳遞和顯示在所需的位置。

譬如，我們也可以在{ }當中呼叫函示:

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

透過這樣的操作，我們可以動態地獲得當天的星期。

但既然叫做「表達式插槽」我們需要小心的是它只能接受JavaScript 的表達式(expression)，不能直接使用語句（statement），譬如底下就是一個錯誤的範例：

import React from 'react';

function MyComponent() {
  const isTrue = true;

  return (
    <div>
      {if (isTrue) {
        <p>It's true!</p>
      }}
    </div>
  );
}

export default MyComponent;

正確應該怎麼修改呢？

import React from 'react';

function MyComponent() {
  const isTrue = true;

  return (
    <div>
      {isTrue ? <p>It's true!</p> : <p>It's not true...</p>}
    </div>
  );
}

export default MyComponent;

Double 花括號

除了string, numbers, 和JavaScript 表達式以外，也可以在花括號裡面使用object。因為在JavaScript本身，object已經是使用花括號包裹了，若我們要使用在JSX的花括號，則必須再包裹一層。

person={{ name: "Hedy Lamarr", inventions: 5 }}

JSX 篇章小結

目前我們初步明白了JSX是什麼，以及基礎的花括號應用，其實JSX除了可以動態插入表達式以外，還有其他的用法像是在JSX中字定義元件、處理事件、設定props、處理條件式渲染等都能夠在JSX當中進行。這些後續也會學習到。

參考資料

1. React 官方文件 - JavaScript in JSX with Curly Braces
2. The Joy of React by Josh W Comeau